<template>
  <a-modal :title="currTitle" :width="450" :visible="visible" :closable="false" :maskClosable="closable">
    <template slot="footer">
      <a-button v-if="closable" @click="close">关闭</a-button>
      <a-button type="primary" @click="submit" :loading="loading">确认</a-button>
    </template>

    <a-form>
      <a-form-item
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 20 }"
        style="margin-bottom: 10px"
        :validate-status="validate_status"
      >
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>您隶属于多仓库，请选择当前管理仓库</span>
          </template>
          <a-avatar style="backgroundcolor: #87d068" icon="gold" />
        </a-tooltip>
        <a-select
          v-model="departSelected"
          :class="{ 'valid-error': validate_status == 'error' }"
          placeholder="请选择管理仓库"
          style="margin-left: 10px; width: 80%"
        >
          <a-icon slot="suffixIcon" type="gold" />
          <a-select-option v-for="d in relOptions" :key="d.value" :value="d.value">
            {{ d.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { stateObjToArray } from '@/utils/common.js'
import { updateUserCurrware } from '@/api/warehouse.js'
export default {
  name: 'WarehouseSelect',
  props: {
    title: {
      type: String,
      default: '部门选择',
      required: false,
    },
    closable: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      visible: false,
      departSelected: '',
      validate_status: '',
      loading: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    ...mapState({
      options: (s) => {
        return stateObjToArray(s.dictionary.enableWarehouse)
      },
      enableWarehouse: (s) => s.dictionary.enableWarehouse,
    }),
    relOptions() {
      const { options, userInfo } = this
      if (options && options.length > 0 && userInfo.relWarehouseIds) {
        const arr = options.filter((f) => userInfo.relWarehouseIds.indexOf(f.value) > -1) || []
        return arr
      } else {
        return []
      }
    },
    currTitle() {
      const { userInfo, enableWarehouse } = this
      const row = enableWarehouse[userInfo.currWarehouse]
      return `仓库切换（当前仓库：${row ? row.text : ''})`
    },
  },
  mounted() {
    this.$store.commit('getEnableWarehouse')
  },
  methods: {
    close() {
      this.departClear()
    },
    show() {
      // 如果组件传值username此处就不用loadDepartList了
      const { userInfo } = this
      this.visible = true
      if (userInfo.currWarehouse) {
        this.departSelected = userInfo.currWarehouse
      } else {
        this.departSelected = undefined
      }
      // this.loadDepartList().then(() => {
      //   this.visible = true
      //   if (!this.departList || this.departList.length <= 0) {
      //     this.$message.warning('您尚未设置部门信息!')
      //     this.departClear()
      //   }
      // })
    },
    async submit() {
      try {
        const { departSelected, userInfo } = this
        const params = {
          userId: userInfo.id,
          warehouseId: departSelected,
        }
        this.loading = true
        await updateUserCurrware(params)
        userInfo.currWarehouse = departSelected
        this.$store.commit('SET_INFO', userInfo)
        this.$message.success('成功!')
        this.close()
      } catch (_) {}
      this.loading = false
    },
    departClear() {
      this.departSelected = ''
      this.visible = false
      this.validate_status = ''
    },
  },
}
</script>
<style scoped>
.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}
</style>